// const el = document.getElementById('app');

// //创建表单对象
// const fd = new FormData();
// // console.log(fd);
// //FormData {}

// const oFrag = document.createDocumentFragment();

// //用户名输入框
// const oUsername = document.createElement('input');
// oUsername.type = 'text';
// oUsername.setAttribute('id', 'username');
// oUsername.value = 'Please input username.';

// //密码输入框
// const oPassword = document.createElement('input');
// oPassword.type = 'password';
// oPassword.setAttribute('id', 'password');
// oPassword.value = '';

// //提交按钮
// const oSubmitBtn = document.createElement('input');
// oSubmitBtn.type = 'submit';
// oSubmitBtn.setAttribute('id', 'submitBtn');
// oSubmitBtn.value = '提交';

// //挂载
// oFrag.appendChild(oUsername);
// oFrag.appendChild(oPassword);
// oFrag.appendChild(oSubmitBtn);

// el.appendChild(oFrag);

// //事件绑定
// oSubmitBtn.onclick = function () {
//   //增加一行表单项数据
//   fd.append('Username', oUsername.value);
//   fd.append('Password', oPassword.value);

//   // console.log(fd);
//   //此时打印是空的表单对象 FormData {} 原因是FormData对象有专门调用键值对的方法

//   // console.log('username: ' + fd.get('Username'));
//   //username: Please input username.
//   // console.log('password: ' + fd.get('Password'));
//   //123456
// };

//进度条
var oFile = document.getElementById('file'),
  oSubmitBtn = document.getElementById('submitBtn'),
  oProgressWrap = document.getElementsByClassName('progress-wrap')[0],
  oErrorTip = document.getElementsByClassName('error-tip')[0];

//监听选择文件节点
oFile.onchange = function () {
  //获取该节点的 选择文件列表
  /**
   console.log(oFile.files);
   * FileList {
   *   0: {
   *     name: 'p1.jpg',
   *     lastModified: 1641556032837,
   *     lastModifiedDate: Fri Jan 07 2022 19:47:12 GMT+0800 (中国标准时间),
   *     webkitRelativePath: '',
   *     size: 3059685,
   *     type: "image/jpeg"
   *   },
   *   1: File,
   *   2: File,
   *   3: File,
   *   length: 4
   * }
   */

  var files = oFile.files,
    fileLen = files.length,
    fileName = '',
    fileSize = 0,
    //最大为10M
    maxSize = 1048576000,
    fd = null,
    errorInfo = '';

  if (fileLen <= 0) {
    oErrorTip.innerText = '您还没有选择图片';
    return;
  }

  if (fileLen > 5) {
    oErrorTip.innerText = '最多可同时上传5张图片';
    return;
  }

  //清空进度
  // oProgressWrap.innerHTML = '';

  for (var i = 0; i < fileLen; i++) {
    fileName = files[i].name;
    fileSize = files[i].size;

    //文件后缀不是以下格式时
    // if (!/\.(gif|jpg|jpeg|png)$/.test(fileName)) {
    //   errorInfo = `${fileName}文件不是图片类型`;
    // }

    //当图片大小超出指定最大尺寸时
    if (fileSize > maxSize) {
      errorInfo = `${fileName}超过可上传大小`;
    }

    //创建对应文件条数的进度条
    var oProgressBar = document.createElement('li');
    oProgressBar.className = 'progress-bar';

    oProgressWrap.appendChild(oProgressBar);

    //当有错误信息时
    if (errorInfo !== '') {
      oProgressBar.innerHTML = `<span class="error-info">${errorInfo}</span>`;
    } else {
      //当没有错误信息时
      oProgressBar.innerHTML = '<div class="progress"></div>';

      //创建表单对象
      fd = new FormData();
      //向后端提供的file属性插入一个文件对象
      fd.append('file', files[i]);

      // console.log(fd.get('file'));
      //File {name: 'p1.jpg', lastModified: 1641556032837, lastModifiedDate: Fri Jan 07 2022 19:47:12 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 3059685, …}

      //发送AJAX请求
      var o = window.XMLHttpRequest
        ? new window.XMLHttpRequest()
        : new ActiveXObject('Microsoft.XMLHTTP');

      o.open('post', 'http://localhost:3001/file_upload');

      //闭包解决多个进度条读条问题
      (function (j) {
        //监听进度条时触发
        o.upload.onprogress = function (e) {
          // console.log(e);
          //ProgressEvent {isTrusted: true, lengthComputable: true, loaded: 2752512, total: 3059892, type: 'progress', …}

          var e = e || window.event;

          //百分比计算
          var percent = (e.loaded / e.total) * 100 + '%';
          // console.log(percent);
          //100%

          //获取当前进度条样式
          var thisProgressBar =
            oProgressWrap.getElementsByClassName('progress-bar')[j];

          //设置当前进度条样式(宽度百分比)
          thisProgressBar.getElementsByClassName('progress')[0].style.width =
            percent;
        };
      })(i);

      //发送表单对象
      o.send(fd);
    }
  }
};
